<%@ page contentType="text/html;charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="tags" tagdir="/WEB-INF/tags"%>
<%@taglib prefix="shiro" uri="http://shiro.apache.org/tags"%>
<c:set var="ctx" value="${pageContext.request.contextPath}" />
<html>
<head>
<title>邮箱绑定</title>
<script type="text/javascript">
	$(function() {
		$('#submit').bind('click', function(row) {
			var email = $("#email").val();
			if (email.length == 0) {
				return;
			}
			$("#email").val(email);
			$('#email-form').submit();
		});
		$('#reset').bind('click', function(row) {
			$("#email").val("");
			$("#msg").html("");
			$("#submit").attr("disabled", false);
		});
	});
	
	function validateEmail() {
		var email = $("#email").val();
		$.get("${ctx}/basic/validate/checkEmail?email=" + email, function(result) {
			if (result.success) {
				$("#msg").html(result.msg);
				$("#submit").attr("disabled", true);
			} else {
				$("#msg").html("恭喜，该邮箱可用");
				$("#submit").attr("disabled", false);
			}
		}, "json");
	}
</script>
</head>

<body>
	<div align="center">
		<div class="panel panel-primary"
			style="width: 600px; height: 350px; padding: 50px;" align="center">
			<div class="panel-heading" align="center">邮箱绑定</div>

			<div class="panel-body" align="center" style="padding: 30px;">
				<form id="email-form" method="post" action="${ctx}/basic/validate/updateEmail">
					<table class="table-condensed">
						<tr>
							<td width="100px" align="right"><label>邮箱：</label></td>
							<td><input id="email" name="email" validtype="email"
								class="easyui-validatebox" required="required" onkeyup="validateEmail()"
								missingMessage="不能为空" invalidMessage="邮箱格式不正确">
							</td>
							<td width="100px"><span id="msg" style="color: red"></span></td>
						</tr>
					</table>
				</form>
			</div>

			<div class="panel-footer" align="right">
				<button id="submit" class="btn btn-primary" type="button">
					<span class="glyphicon glyphicon-ok"></span> 提交
				</button>
				<button id="reset" class="btn btn-primary" type="button">
					<span class="glyphicon glyphicon-refresh"></span> 重置
				</button>
			</div>

		</div>
	</div>
</body>
</html>